<template>
  <div class="operation-panel">
    <div @click="open = !open" class="menu" v-show="menuShow">
      <span>设备操作</span>
      <img :class="clsx(open ? '' : 'rotate-180')" :src="vector" alt=""/>
    </div>
    <div v-show="open && menuShow" class="menu-box">
      <div
        v-for="(item, index) in operationList"
        :class="clsx('menu-item', itemSelect === item.value ? 'active' : '')"
        :key="index"
        @click="itemSelect = item.value">
        <el-row style="width: 100%">
          <el-col :span="10">
            <span style="line-height: 40px">{{ item.name }}</span>
          </el-col>
          <el-col :span="14">
            <el-switch v-if="item.control === 'switch'" v-model="item.value" active-color="#1FE6E7"
                       inactive-color="#dcdfe6" style="margin: 10px 0" @change="handleSwitchChange(item)"></el-switch>
            <el-slider v-else-if="item.control === 'slider'" v-model="item.value" :min="0" :max="100"
                       :tooltip-class="'custom-tooltip'" @change="handleSliderChange(item)"></el-slider>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import clsx from 'clsx'
import vector from './images/Vector@1x.png'

export default {
  props: {
    menuShow: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      clsx,
      vector,
      open: true,
      itemSelect: '',
      operationList: [
        {key: 0, name: '通风系统', value: false, control: 'switch'},
        {key: 1, name: '大棚灯光', value: 0, control: 'slider'},
        {key: 2, name: '顶部喷淋', value: 0, control: 'slider'},
        {key: 3, name: '底部喷淋', value: 0, control: 'slider'}
      ]
    }
  },
  methods: {
    handleSwitchChange(item) {
      if (window.KCDT) {
        const isOpen = item.value === true ? 1 : 0;
        window.KCDT.openVentilationSystem(isOpen);
      }
    },
    handleSliderChange(item) {
      if (window.KCDT) {
        const methodMapping = {
          1: 'setGreenhouseLighting',
          2: 'setTopSpray',
          3: 'setBottomSpray'
        };
        const methodName = methodMapping[item.key];
        if (methodName && typeof window.KCDT[methodName] === 'function') {
          window.KCDT[methodName](item.value);
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.custom-tooltip {
  > span {
    color: #180808 !important;
  }
}

::v-deep .el-slider__bar {
  background-color: #1FE6E7;
}

/* 滑块颜色 */
::v-deep .el-slider__button {
  border: 2px solid #1FE6E7;
}

/* 滑动轨颜色 */
::v-deep .el-slider__runway {
  background-color: #7c7676;
}

.operation-panel {
  position: absolute;
  bottom: 30px;
  right: 15px;
  z-index: 22;
  width: 20%;
  opacity: 1;
  display: flex;
  flex-direction: column;
  padding: 0px;
  gap: 8px;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(55, 147, 125, 0.3) 0%, rgba(0, 124, 115, 0.1) 100%);

  .menu {
    width: 100%;
    height: 36px;
    opacity: 1;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(55, 147, 125, 0.8) 0%, rgba(0, 124, 115, 0.8) 100%);
    box-sizing: border-box;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(45, 140, 234, 0.3);
    z-index: 0;
  }

  .menu-box {
    padding: 0px 5px;
    gap: 3px;
    display: flex;
    flex-direction: column;

    .menu-item {
      width: 100%;
      height: 40px;
      opacity: 1;
      color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      z-index: 1;
      padding: 5px;
    }

    .menu-item:hover {
      background: rgba(33, 96, 180, 0.35);
      cursor: pointer;
    }
  }
}

.rotate-180 {
  transform: rotate(180deg);
}

</style>
